<template>
  <view class="login-container">
    <view class="login-header">
      <text class="header-title">换电柜运营管理</text>
    </view>
    <view class="login-form">
      <view class="input-group">
        <input 
          class="input-field" 
          placeholder="请输入登录账号" 
          v-model="username"
        />
      </view>
      
      <view class="input-group">
        <input 
          class="input-field" 
          placeholder="请输入登录密码" 
          password 
          v-model="password"
        />
      </view>
      
    <!--  <view class="forgot-password">
        <text class="forgot-text">忘记密码</text>
      </view> -->
      
      <view class="agreement">
        <label class="radio">
          <radio value="1" :checked="agreed" @click="agreed = !agreed" />
          <text class="radio-left">我已阅读并同意</text>
        </label>
		<view class="agreement-text" @click="toProtocol">
			<text class="radio-text">《用户协议》《隐私协议》</text>
		</view>
      </view>
      
      <button class="login-btn" @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script>
import api from '@/config/api.js'
export default {
  data() {
    return {
      username: '',
      password: '',
      agreed: false
    }
  },
  methods: {
   async  handleLogin() {
      if (!this.username || !this.password) {
        uni.showToast({
          title: '请输入账号和密码',
          icon: 'none'
        })
        return
      }
      
      if (!this.agreed) {
        uni.showToast({
          title: '请阅读并同意协议',
          icon: 'none'
        })
        return
      }
      try {
        const result = await api.auth.login({
			"username": this.username,
			 "password": this.password
        })
		console.log('result',result)
		if(result.access_token){
			uni.setStorageSync('token',result.access_token)
			// 模拟登录成功
			uni.showToast({
			  title: '登录成功',
			  icon: 'success'
			})
			setTimeout(() => {
			  uni.navigateTo({
			    url: '/pages/index/index'
			  })
			}, 1500)
		}
      
      } catch (error) {
        console.error('登录:', error)
      }
     
    },
	toProtocol(){
		uni.navigateTo({
			url:'/pages/protocol/protocol',
			events: {
			    setCheck: (data)=> {
			      data && (this.agreed=true)
			    }
			}
		})
	}
  }
}
</script>

<style scoped>
.login-container {
  padding: 80rpx;
  background-color: #1e66d1;
  min-height: 100vh;
}

.login-header {
  text-align: center;
  margin-top: 120rpx;
  margin-bottom: 80rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.login-form {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.input-group {
  margin-bottom: 40rpx;
  border-bottom: 1rpx solid #eee;
  padding-bottom: 20rpx;
}

.input-field {
  height: 80rpx;
  font-size: 32rpx;
  color: #333;
}

.input-field::placeholder {
  color: #999;
}

.forgot-password {
  text-align: right;
  margin-bottom: 40rpx;
}

.forgot-text {
  font-size: 28rpx;
  color: #007AFF;
}

.agreement {
  margin-bottom: 60rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.agreement-text{
	font-size: 28rpx;
	color: #666;
	display: flex;
	flex-direction: column;
}
.radio {
  display: flex;
  align-items: center;
}
.radio-left{
	font-size: 28rpx;
	color: #666;
}
.radio-text {
  font-size: 28rpx;
  color: #007AFF;
  margin-left: 10rpx;
}

.login-btn {
  background-color: #007AFF;
  color: #fff;
  height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  line-height: 88rpx;
}
</style>